<template>
	<div class="loanApplyException">
		<el-breadcrumb class="breadcrumb" separator="/">
			<el-breadcrumb-item :to="{ path: '/order' }">我的订单</el-breadcrumb-item>
			<el-breadcrumb-item>通融申请</el-breadcrumb-item>
		</el-breadcrumb>
		<div class="dialog-edit">
			<el-dialog size="large" title="通融申请" :visible.sync="isEdit" top="80px">
				<hr>
				<el-tabs class="info-tabs" v-model="activeNameDialog" @tab-click="$libs.scrollTop('.el-tabs__content')">
					<template v-for="vm in tapListDialog">
						<el-tab-pane class="info-temp" :label="vm.name" :name="'tap'+vm.index">
							<div :is="vm.temp" :ref="vm.temp + 'Dialog'"></div>
						</el-tab-pane>
					</template>
				</el-tabs>
				<div class="dialog-footer">
					<el-button @click="saves" type="save">保存</el-button>
					<el-button type="primary" @click="submit" :disabled=" isFirstSubmitDialog==false">提交</el-button>
					<label v-show="$store.state.isAllMust && isSubmit" class="tip">资料未填写完整无法进行提交！</label>
				</div>
			</el-dialog>
		</div>
		<el-dialog size="large" title="征信补录" :visible.sync="isCredit" top="80px">
			<hr>
			<div class="creditEdit">
				<credit @submit-success='isCredit=false' ref="credit"></credit>
			</div>
			<div class="dialog-footer">
				<el-button type="primary" @click="submitCredit">提交</el-button>
			</div>
		</el-dialog>
		<el-dialog size="large" title="附件补录" :visible.sync="isAttachment" top="80px">
			<hr>
			<div class="creditEdit">
				<attachment ref="attachment"></attachment>
			</div>
			<div class="dialog-footer">
				<el-button type="primary" @click="submitCredit">提交</el-button>
			</div>
		</el-dialog>
		<div class="info-content">
			<div class="title">客户信息</div>
			<div class="infoContent">
				<el-row class="info-row">
					<el-col :span="8" class="info-label">
						订单编号：
						<router-link :to="{path:'/orderDeal?orderNo='+customerInfo.orderNo}">
							<label class="text active">{{customerInfo.orderNo}}</label>
						</router-link>
					</el-col>
					<el-col :span="8" class="info-label">
						业务员：
						<label class="text">{{customerInfo.salesman}}</label>
					</el-col>
					<el-col :span="8" class="info-label">
						业务部门：
						<label class="text">{{customerInfo.salesmanUnit}}</label>
					</el-col>
				</el-row>
				<el-row class="info-row">
					<el-col :span="8" class="info-label">
						客户姓名：
						<label class="text">{{customerInfo.customer}}</label>
					</el-col>
					<el-col :span="8" class="info-label">
						申请日期：
						<label class="text">{{customerInfo.applyDate}}</label>
					</el-col>
					<el-col :span="8" class="info-label">
						车型：
						<label class="text">{{customerInfo.carModel}}</label>
					</el-col>
				</el-row>
				<el-row class="info-row">
					<el-col :span="8" class="info-label">
						贷款额度：
						<label class="text">{{customerInfo.loanPrice}}</label>
					</el-col>
				</el-row>
			</div>
			<div class="title">通融原因</div>
			<div class="infoContent">
				<el-row class="info-row info-row-left">
					<el-col :span="22">
						<el-input class="info-textarea" :rows="3" type="textarea" placeholder="请输入" v-model="result"></el-input>
					</el-col>
				</el-row>
			</div>
			<div class="infoContent">
				<el-button class="el-button--save" @click="isCreditEdit">新增担保人</el-button>
				<el-button class="el-button--save" @click="isAttachmentEdit">附件补录</el-button>
			</div>
			<hr class="hr">
			<div>
				<el-button @click="dialogEnter" type="primary" :disabled="isFirstSubmit==true">提交</el-button>
			</div>
		</div>
	</div>
</template>
<script>
export default {
	name: 'loanApplyException',
	components: {
		credit: require('../../components/order/creditAdd'),
		attachment: require('../../components/order/attachment'),
		carBuyCommon: require('../../components/order/carBuyCommon'),
		assurePerson: require('../../components/order/assurePerson'),
	},
	data() {
		return {
			orderNo: this.$route.query.orderNo,
			annexBatchNo: this.$route.query.annexBatchNo,
			bizType: this.$route.query.bizType,
			tapList: [
				{ name: '征信结果', index: 0, temp: 'credit' },
			],
			tapListDialog: [
				{ name: '共同购车人', index: 2, temp: 'carBuyCommon', show: true },
				{ name: '担保人', index: 3, temp: 'assurePerson', show: true },
			],
			isCredit: false, //是否征信补录
			isAttachment: false, //是否附件补录
			isFirstSubmit: false,
			isFirstSubmitDialog: true,
			isEdit: false,
			isSubmit: false,
			activeNameDialog: 'tap2',
			customerInfo: {
				orderNo: '', //订单编号
				salesman: '', //业务员
				salesmanUnit: '', //业务部门
				customer: '', //客户姓名
				applyDate: '', //申请日期
				carModel: '', //车型
				loanPrice: '', //贷款额度
				marry: '',
				assurePerson: false,
			},
			result: '', //通融原因

		}
	},
	methods: {
		isCreditEdit() {
			this.isCredit = true;
			this.$nextTick(() => {
				this.$refs.credit.isEdit = true;
				this.$refs.credit.getCreditInfo(this.orderNo);
			});

		},
		submitCredit() {
			// 征信提交
			this.isAttachment = false;
			this.$refs.credit.creditInfoEnter(this.orderNo);
		},
		isAttachmentEdit() {
			this.isAttachment = true;
			this.$nextTick(() => {
				this.$refs.attachment.isEdit = true;
				this.$refs.attachment.postDeal(this.orderNo, this.annexBatchNo);
			});
		},
		dialogEnter() {
			let param = {
				applyType: 3,
				bizType: this.bizType,
				orderNo: this.orderNo,
				remark: this.result,
			};
			if (!this.$libs.mustWrite(param)) {
				this.$message('请把信息补充完整');
				return;
			}
			for (let i = 0; i < this.tapListDialog.length; i++) {
				if (this.tapListDialog[i].index == 2) {
					if (this.customerInfo.marry == 1 || this.customerInfo.marry === '0') {
						this.tapListDialog[i].show = true;
					} else {
						this.tapListDialog[i].show = false;
						this.activeNameDialog = 'tap3';
					}
				} else if (this.tapListDialog[i].index == 3) {
					this.tapListDialog[i].show = this.customerInfo.assurePerson;
				}
				if (this.tapListDialog[i].show == false) {
					this.tapListDialog = this.tapListDialog.filter(tab => tab.index != this.tapListDialog[i].index);
					i--;
				}
			}
			if (this.tapListDialog.length == 0) {
				this.$confirm('是否确认提交?', '取消', {
					confirmButtonText: '提交',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.isFirstSubmit = true;
					this.$http.post('/submitTaskController/accomApply', param).then((data) => {
						if (data.data.success) {
							this.$message({
								message: '通融申请成功',
								type: 'success'
							});
							// 通融申请成功
							this.$router.push({ path: '/order' });
						} else {
							this.$message.error(data.data.message);
						}
					}).catch((error) => {

					})
				}).catch((error) => {});
			} else {
				this.isEdit = true;
				this.$nextTick(() => {
					console.log('refs');
					console.log(this.$refs);
					for (let i = 0; i < this.tapListDialog.length; i++) {
						let el = this.tapListDialog[i];
						// this.$refs[el.temp + 'Dialog'][0].disabled = false;
						this.$refs[el.temp + 'Dialog'][0].isEdit = true;
						switch (el.index) {
							case 2:
								this.$refs[el.temp + 'Dialog'][0].getInfo(this.orderNo, this.isSubmit);
								break;
							case 3:
								this.$refs[el.temp + 'Dialog'][0].getInfo(this.orderNo, this.isSubmit);
								break;
							default:
								break;
						}
					}
				});
			}

		},
		saves() {
			this.isSubmit = false;
			this.$store.commit('clearStatus');
			this.$store.commit('tipChange', {
				title: '通融申请资料保存成功！',
				theme: '保存成功',
				enter: '知道了'
			});
			this.save();
		},
		save() {
			this.$store.commit('saveNumClear', this.tapListDialog.length);
			for (var i = 0; i < this.tapListDialog.length; i++) {
				let el = this.tapListDialog[i];
				switch (el.index) {
					case 2:
						this.$refs[el.temp + 'Dialog'][0].infoEnter(this.orderNo, this.isSubmit, this.orderStatus, () => {
							this.isFirstSubmitDialog = true;
						});
						break;
					case 3:
						this.$refs[el.temp + 'Dialog'][0].infoEnter(this.orderNo, this.isSubmit, this.orderStatus, () => {
							this.isFirstSubmitDialog = true;
						});
						break;
					default:
						break;
				}
			}
		},
		submit() {
			this.isFirstSubmitDialog = false;
			this.$store.commit('clearStatus');
			this.isSubmit = true;
			this.$store.commit('toSubmit');
			this.$store.commit('tipChange', {
				title: '通融申请资料提交成功！',
				theme: '提交成功',
				enter: '知道了',
				param: {
					applyType: 3,
					bizType: this.bizType,
					orderNo: this.orderNo,
					remark: this.result,
				},
				status: 1
			});
			this.save();
		}
	},
	mounted() {
		this.$http.get('/audit/accomInfo/' + this.orderNo).then((data) => {
			if (data.data.success) {
				let datas = data.data.data;
				this.customerInfo = {
					orderNo: datas.orderNo, //订单编号
					salesman: datas.staffName, //业务员
					salesmanUnit: datas.deptName, //业务部门
					customer: datas.customerName, //客户姓名
					applyDate: datas.applyCreate, //申请日期
					carModel: datas.carModel, //车型
					loanPrice: datas.loanAmount, //贷款额度
					marry: datas.bemarried,
					assurePerson: !datas.sponsor ? false : true,
				};
				this.exceptionInfo.person = datas.modifyStaffName;
				this.exceptionInfo.date = datas.modifyCreate;
			}
		}).catch((error) => {

		});
	}
}

</script>
<style type="text/css" lang="scss" scoped>
@import '../../assets/css/site.scss';
.loanApplyException {
	padding: 10px 16px;
	position: relative;
	.info-content {
		background: #fff;
		padding: 20px;
		position: absolute;
		top: 50px;
		left: 16px;
		right: 16px;
		bottom: 0;
		padding-bottom: 60px;
		overflow: auto;
		.hr {
			margin: 20px 0px 30px 0px;
			border: none;
			border-bottom: 1px solid #d3dce6;
		}
		.infoContent {
			margin-right: 350px;
			color: #5e6d82;
			.checkResult {
				text-align: left;
				margin-left: 6px;
				margin-top: 3px;
			}
			.active {
				color: #20a0ff;
			}
			.info-row-left {
				margin-left: 0px;
			}
		}
	}
	.creditEdit {
		padding: 10px 30px;
		overflow: auto;
		max-height: 500px;
	}
	.dialog-footer {
		text-align: center;
		padding-top: 10px;
		border-top: 1px solid #d3dce6;
	}
	.dialog-edit {
		// position: absolute;
		hr {
			margin: 0px 0px 0px 0px;
			border: none;
			border-bottom: 1px solid #d3dce6;
		}
		.info-temp {
			background: #fff;
			.customInfo,
			.carBuyCommon,
			.assurePerson,
			.attachment,
			{
				padding-right: 15px;
			}
			.carAndCredit {
				padding-right: 55px;
			}
		}
		.info-tabs {
			min-height: 520px;
			margin: 30px 113px 0px 113px;
		}
		.dialog-footer {
			text-align: center;
			padding-top: 10px;
			border-top: 1px solid #d3dce6;
			.tip {
				font-size: 12px;
				color: #ff4949;
				position: absolute;
				margin-left: 10px;
				line-height: 2.8;
			}
		}
	}
}

</style>
